<template>
  <div>
    <TitleCompound :title="title" :description="description"></TitleCompound>
  </div>
  <div class="parent">
    <div class="content">
      <CategoryScopedSlot>
        <template #title>
          <h1>这是我的title</h1>
        </template>
        <!-- <h2>this is new content</h2> -->
        <template v-slot="params">

          <ol>
            <li v-for="item in params.games" :key="item.toString()">
              {{ item }}
            </li>
          </ol>

          <span>展示params传递过来的原始值：</span>
          <span>{{ params }}</span>
        </template>
      </CategoryScopedSlot>
    </div>

  </div>
</template>
<script lang="ts" setup>
import TitleCompound from '@/components/TitleCompound.vue';
import CategoryScopedSlot from './CategoryScopedSlot.vue';

const title = "Scoped Slot"
const description = `scoped slot在 数据在子组件中，父组件负责调整展示样式。即数据需要子组件传给父组件，父组件来控制展示形式`

</script>
<style lang="scss" scoped>
li {
  list-style: none;
}

li::marker {
  content: '🔥';
}

h1 {
  // color: red;
  text-align: center;
  background-color: rgba(231, 243, 13, 0.779);
}

.parent {
  background-color: rgb(216, 214, 214);
  padding: 20px;
  display: flex;
  border-radius: 10px;
  justify-content: space-evenly;
}
</style>
